<template>
	<div class='footer-buy-container'>
		<div v-if="goodsDetails.goods_label == 3" :class='goodsDetails.groupbuy_info.groupState == 32 ? "time-over": ""' class="crowd-state ">
			<div class='crowd-num-container'>
				<span class='crowd-apply'>{{goodsDetails.groupbuy_info.buyer_count}}</span><span class='crowd-total'>/{{goodsDetails.groupbuy_info.target_quantity}}</span>
			</div>
			<div class='time-remind-content'>
				<span>{{goodsDetails.groupbuy_info.countDownText}}</span>
			</div>
		</div>
		<div class='footer-buy-content'>
			<!--客服按钮  -->
			<div class='server-avatar' @click='_showChat'>
				<img src='https://yami.yamichefs.cn/yaminew/app/admin/yami/Uploads/service/5bbf3f7b59a82.jpg' />
			</div>
			<!-- 普通商品 -->
			<div class='btn-container' v-if="goodsDetails.goods_label == 0">
				<div v-if="goodsDetails.goods_storage > 0 && goodsDetails.goods_state != 0" class="btn-type-box">
					<span class='add-cart' @click="shareToFriend">推荐给朋友</span>
					<span class='buy-btn' @click="chooseGeneralBuy">￥{{parseInt(goodsDetails.goods_price)}} 定制</span>
				</div>
				<div v-else class="btn-type-box">
					<span class='no-stock-btn' catchtap="chooseGeneralBuy">￥{{parseInt(goodsDetails.goods_price)}}再上线提醒我</span>
				</div>
			</div>
			<!-- 月定制 -->
			<div class='btn-container' v-else-if="goodsDetails.goods_label == 1">
				<div v-if="goodsDetails.goods_storage > 0 && goodsDetails.goods_state != 0" class="btn-type-box">
					<div class='ordinary-btn' @click="chooseGeneralBuy">
						<span class='ordinary-price'>￥{{parseInt(goodsDetails.goods_price)}}</span>
						<span class='ordinary-explain'>定制</span>
					</div>
					<div class='group-btn' @click="chooseMonthBuy">
						<span class='group-price'>￥{{monthCustomization.isChooseSpec?goodsDetails.spec[defaultSpecIndex].goods_price:goodsDetails.goods_price}}</span>
						<span class='group-explain'>月定制</span>
					</div>
				</div>
				<div v-else class="btn-type-box">
					<span class='no-stock-btn' catchtap="chooseGeneralBuy">￥{{parseInt(goodsDetails.goods_price)}}再上线提醒我</span>
				</div>
			</div>
			<!-- 拼团 -->
			<div v-else-if="goodsDetails.goods_label == 2">
				<div class='btn-container' v-if="!fromMemberId">
					<div class="btn-type-box" v-if="isAuthSet">
						<button class='ordinary-btn' open-type='getUserInfo' @click='chooseGeneralBuy'>
			              <span class='ordinary-price'>￥{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_price}}</span>
			              <span class='ordinary-explain'>定制</span>
			            </button>
						<button class='group-btn' open-type='getUserInfo' data-handle-name="chooseGroupBuy" @click='chooseGroupBuy'>
			              <span class='group-price'>￥{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_group_price}}</span>
			              <span class='group-explain'>3人团省{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_price - goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_group_price}}元</span>
			            </button>
					</div>
					<div class="btn-type-box" v-else>
						<div class='ordinary-btn' catchtap="chooseGeneralBuy">
							<span class='ordinary-price'>￥{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_price}}</span>
							<span class='ordinary-explain'>定制</span>
						</div>

						<div class='group-btn' catchtap="chooseGroupBuy">
							<span class='group-price'>￥{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_group_price}}</span>
							<span class='group-explain'>3人团省{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_price - goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_group_price}}元</span>
						</div>
					</div>
				</div>
				<!-- 从分享链接进入 -->
				<div class='btn-container' v-else-if="fromMemberId" catchtap="chooseGeneralBuy">
					<div class='group-btn'>
						<span class='group-price'>￥{{goodsDetails.spec[defaultSpecIndex.defaultSpecIndex].goods_group_price}}</span>
						<span class='group-explain'>与好友一起拼团</span>
					</div>
				</div>
				<!-- 用户拼团中 不可再次发起拼团 -->
				<div class='btn-container' v-else-if="ss">
					<div class='group-btn' catchtap="goBuyGoods">
						<span class='group-price'>邀请朋友</span>
						<span class='group-explain'>还差2人成团</span>
					</div>
				</div>
			</div>
			<div class='btn-container' v-else-if="goodsDetails.goods_label == 3">
				<span class='no-stock-btn' @click="chooseCrowdBuy">￥{{goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_crowd_price}}{{goodsDetails.groupbuy_info.groupState == 32 ? "再上线提醒我": "定制"}}</span>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
	import { Toast } from 'mint-ui';
	export default {
		props:{
			showChat: {
				type: Function,
				require: true
			}
		},
		data() {
			return {
				// 是否有个人信息
				isAuthSet: true,
				// 是否有个人信息
				fromMemberId: false,
				noStockBtn: false,
				normal: true,
				isZhongChou: false,
				pintuan: false,
				monthCustomization: {
					isChooseSpec: false
				},
				chooseBuyType: {
					isShowModel: false,
					chooseBuyMethod: null,
					optionModelName: null
				},
				timer: null
			}
		},
		created() {},
		mounted() {
			var _this = this;
			if(this.goodsDetails.goods_label == 3){
				this._getCountDownText(this.goodsDetails.groupbuy_info.count_down)
			}
			setTimeout(function() {
				console.log(_this.goodsDetails)
			}, 2000);
		},
		methods: {
			...mapMutations(['_getSerializeMonth']),
			_showChat() {
				console.log(this)
				if(this.showChat) {
					this.showChat()					
				}
			},
			chooseGeneralBuy() {
				this.chooseBuyType = {
					isShowModel: true,
					chooseBuyMethod: 0,
					optionModelName: "general_modal"
				}
				if(!this.showSelectSpec()) {
					return;
				}
				this.$emit("showModel", this.chooseBuyType);
			},
			chooseMonthBuy() {
				this.chooseBuyType = {
					isShowModel: true,
					chooseBuyMethod: 1,
					optionModelName: "month_custom"
				}
				if(!this.showSelectSpec()) {
					return;
				}
				this.$emit("showModel", this.chooseBuyType);
				// 月定制计算月份，方法写在mutations
				this._getSerializeMonth();
			},
			chooseGroupBuy() {
				this.chooseBuyType = {
					isShowModel: true,
					chooseBuyMethod: 2,
					optionModelName: "group_booking"
				}
				if(!this.showSelectSpec()) {
					return;
				}
				this.$emit("showModel", this.chooseBuyType);
			},
			setDefaultSpecIndex() {
				for(var i = 0; i < this.goodsDetails.spec.length; i++) {
					if(this.goodsDetails.spec[i].goods_storage > 0) {
						return i;
					}
				}
			},
			chooseCrowdBuy() {
				this.chooseBuyType = {
					isShowModel: true,
					chooseBuyMethod: 3,
					optionModelName: "crowd_funding"
				};
				if(!this.showSelectSpec()) {
					return;
				}
				this.$emit("showModel", this.chooseBuyType);
			},
			showSelectSpec() {
				const _this = this;
				// 判断众筹商品 是否正在进行中
				if(_this.goodsDetails.goods_label == 3) {
					if(this.goodsDetails.groupbuy_info.groupState == 10) {
						Toast('活动还未开始');
						return false;
					} else if(this.goodsDetails.groupbuy_info.groupState == 30) {
						Toast("活动已结束");
						return false;
					}
				}
				// 判断库存是否充足
				if(_this.goodsDetails.goods_state == 0) {
					Toast('商品已下架');
					return false;
				}
				// 判断是否已经绑定手机
				//				if(!app.isMember(_this.userInfo)) {
				//					_this.setData({
				//						showLoginType: 'showSelectSpec'
				//					});
				//					_this.loginView.showModel();
				//					return;
				//				}
				return true;
				//				_this._setSelectedPrice();
				//				_this.goodsParamDialog.showDialog();
			},
			// 众筹剩余时间
			_getCountDownText(leftovertEndTime) {
				const _this = this;
				if(leftovertEndTime <= 0) {
					clearTimeout(_this.timer);
					return {
						groupState: 30,
						countDownText: "众筹已结束"
					}
				} else {
					_this._setCountDownText(leftovertEndTime, "距众筹结束还有");
					leftovertEndTime--;
					_this.timer = setTimeout(function() {
						_this._getCountDownText(leftovertEndTime)
					}, 1000)
				}
			},
			_setCountDownText(leftovertTime, countDownText) {
				const _this = this;
				//				let countDownText = "距众筹结束还有";
				const day = Math.floor(leftovertTime / 60 / 60 / 24) + "天";
				const hours = Math.floor(leftovertTime / 60 / 60 % 24) + "小时";
				const minute = Math.floor(leftovertTime / 60 % 60) + "分钟";
				let secend = leftovertTime % 60;
				secend < 10 ? secend = '0' + secend : secend = secend;
				countDownText = countDownText + day + hours + minute + secend;
				_this.$set(_this.goodsDetails.groupbuy_info, "countDownText", countDownText);
				_this.$set(_this.goodsDetails.groupbuy_info, "count_down", leftovertTime);
			},
			// 推荐给朋友
			shareToFriend() {
				if(!yzBroserIsNative()) {
					Toast("请在手机app中分享！");
					return;
				}
				let showShareDetails = {
					isShow: true,
					options: {
						type: "web",
						title: this.goodsDetails.goods_name,
						thumbs: [ this.goodsDetails.goods_image],
						content: '快和我一起参加这个活动吧！',
						// 到时需要区分是活动，还是商品
						href: "http://192.168.2.193:8080/#/goodsDetail/" + this.$route.params.goods_id
					}
				}
				this.$emit("showShareModel", showShareDetails)
			}
		},
		computed: {
			...mapState(['goodsDetails'])
		},
		components: {
		}
	}
</script>

<style scoped lang="scss">
	.footer-buy-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1701;
		.footer-buy-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18px 40px;
			box-shadow: -6px -6px 20px 0 rgba(69, 69, 83, 0.1);
			.server-avatar {
				flex-shrink: 0;
				overflow: hidden;
				width: 80px;
				height: 80px;
				margin-right: 30px;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.btn-container {
				width: 100%;
				.no-stock-btn {
					float: right;
					padding: 16px 30px;
					background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
					box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
					border-radius: 8px;
					color: #fff;
					font-size: 28px;
				}
				.btn-type-box {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.ordinary-btn {
						display: flex;
						flex-direction: column;
						height: 100%;
						align-items: center;
						padding: 15px 40px;
						margin-right: 20px;
						background: #F8F8F8;
						color: #4a4a4a;
						line-height: 34px;
						font-size: 24px;
						border-radius: 8px;
					}
					.group-btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						min-width: 140px;
						padding: 15px 40px;
						margin: 0;
						background: #FFFFFF;
						background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
						box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
						line-height: 42px;
						color: #fff;
						border-radius: 8px;
						.group-price {
							font-size: 24px;
							line-height: 34px;
						}
						.group-explain {
							font-size: 18px;
						}
					}
					.add-cart {
						padding: 16px 20px;
						margin-right: 40px;
						background-color: #f8f8f8;
						border-radius: 8px;
						color: #67666b;
						font-size: 28px;
						text-align: center;
						line-height: 42px;
					}
					.buy-btn {
						padding: 16px 20px;
						margin: 0;
						background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
						box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
						border-radius: 8px;
						font-size: 28px;
						color: #fff;
						line-height: 42px;
					}
					.no-stock-btn {
						padding: 16px 30px;
						background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
						box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
						border-radius: 8px;
						color: #fff;
						font-size: 28px;
					}
				}
			}
		}
		/*众筹*/
		.crowd-state {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #EF364E;
			padding: 0 40px;
			.crowd-num-container {
				line-height: 88px;
				.crowd-apply {
					display: inline-block;
					vertical-align: top;
					color: #fff;
					font-size: 36px;
				}
				.crowd-total {
					display: inline-block;
					vertical-align: top;
					color: #fff;
					font-size: 20px;
				}
			}
			.time-remind-content {
				font-size: 24px;
				color: #fff;
				line-height: 44px;
			}
		}
	}
</style>